{% extends 'web/base.html' %}
{% load staticfiles %}
{% block base_title %} 支付 {% endblock %}
<!--{% block manifest %}appcache/zhifu.appcache{% endblock %}-->
{% block base_run %}zhifu{% endblock %}
{% block base_body %}
<div class="open_down scroll all_bg" id="zhifu">
    <div v-if="loading"></div>
    <div v-else class="load_fix">
        <div class="zuan_center" style="background:none;">
            <div class="ui active centered inline loader red" style="top: 50%;transform: scale(.6)"></div>
        </div>
    </div>

    <table>
        <tr>
            <td>订单编号：</td>
            <td v-html="dingdan"></td>
        </tr>
        <tr>
            <td>产品名称：</td>
            <td v-html="pname"></td>
        </tr>
        <tr>
            <td>产品价格</td>
            <td><span class="priceFK" v-html="mat"></span></td>
        </tr>
        <tr>
            <td>开通时长</td>
            <td v-html="yue">个月</td>
        </tr>
    </table>
    <div class="down_fk">
        实际付款(元)
        <p class="priceFK" v-html="mon"></p>
        <div class="down_evm"><img src="{% static 'img/evm.png' %}" alt=""></div>
    </div>
</div>
{% endblock %}

{% block base_script %}
    var zhifu = new Vue({
        el:'#zhifu',
        data:{
            mon:'',
            dingdan:'',
            mat:'',
            pname:'',
            yue:'',
            loading:false,
        },
        methods:{
            getDdbh:function(){
                var self=this;
                // console.log(localStorage.getItem('gift'));
                reqwest({
                    url:'http://api.zgtxcj.com/txcjapi/placeorder/',
                    method:'post',
                    type:'json',
                    data:{
                        uid:localStorage.getItem('uid'),
                        did:localStorage.getItem('did'),
                        gift:localStorage.getItem('gift'),
                        type:5,
                        num:localStorage.getItem('yue')
                    },
                    success:function(resp){
                        // console.log(resp)
                        self.dingdan=resp;
                        self.getzhifu();
                        self.loading= true;
                    }
                })
            },
            getzhifu:function(){
                this.mat=localStorage.getItem('mat');
                this.mon=localStorage.getItem('money');
                this.pname=localStorage.getItem('pname');
                this.yue=localStorage.getItem('yue');
                console.log(this.yue)
            },
            run:function () {
                this.getDdbh()
            }
        },
    })
{% endblock %}